import React, { Component } from "react";
import { Route, Redirect, withRouter, Switch } from "react-router-dom";
import Mynavlink from "./Mynavlink";
import "./style.css";
import { Child1 } from "./child/Child1";
import { Child2 } from "./child/Child2";
import { Child3 } from "./child/Child3";
import Mylink from "./Mylink";
import Notfund from "./notfund";

@withRouter
class App extends Component {
  th;
  back = () => {
    this.props.history.goBack();
  };
  forward = () => {
    this.props.history.goForward();
  };
  goto = () => {
    this.props.history.go(-2);
  };
  render() {
    return (
      <>
        <h2>React-Router-DOM</h2>
        {/* Mynavlink 自己封装的组件，减少代码冗余。通过自定义属性传至 */}
        <Mynavlink to="/child1">
          <button>组件1</button>
        </Mynavlink>
        <Mynavlink to="/child2">
          <button>组件2</button>
        </Mynavlink>
        <Mynavlink to="/child3">
          <button>组件3</button>
        </Mynavlink>
        <Switch>
          <Route path="/child1" component={Child1} exact />
          <Route path="/child2" component={Child2} />
          <Route path="/child3" component={Child3} />
          <Route path="*" component={Notfund} />
          <Redirect to="/child1" />
        </Switch>
        <button onClick={this.back}>&lt;</button>
        <button onClick={this.goto}>go-2</button>
        <button onClick={this.forward}>&gt;</button>
        <Mylink tag="h1" to="/child2">
          <button>点我</button>
        </Mylink>
      </>
    );
  }
}
export default App;
